<template>
    <el-container class="registeredBox settle-sub-box">
        <el-header height="auto">
            <div class="hospitalInfo">
                <div class="infoTop clearfix">
                    <div class="hospital">哈尔滨市第五医院</div>
                    <div class="rating">三级甲等</div>
                </div>
                <div class="infoBot"><i class="iconfont icon-address"></i>哈尔滨香坊区健康路27号</div>
                <div class="infoBot">
                    <div class="rule" @click="showConfirm=true">预约规则</div>
                    <i class="iconfont icon-phone"></i>(0451)88626761<span class="ml20">15776946507</span></div>
            </div>
        </el-header>
        <el-main>
            <div class="department-list">
                <grid :cols="2" :show-lr-borders="false">
                    <grid-item v-for="(item, i) in departmentList" :key="i">
                        <div :class="{active: item.active, error: item.important}" @click="changeDepartment(item)">
                            {{item.name}}
                        </div>
                    </grid-item>
                </grid>

                <!--                <div :class="{active: item.active}"-->
                <!--                     v-for="(item, i) in departmentList" :key="i"-->
                <!--                     @click="changeDepartment(item)">-->
                <!--                    {{item.name}}-->
                <!--                </div>-->
            </div>
        </el-main>
        <confirm v-model="showConfirm" title="预约规则" confirm-text="知道了" class="rule-confirm" :show-cancel-button="false">
            <div v-html="rule" style="white-space: pre-line;"></div>
        </confirm>
        <confirm v-model="showDepartmentDescription.show" :title="showDepartmentDescription.title" confirm-text="知道了"
                 class="rule-confirm" :show-cancel-button="false">
            <div v-html="showDepartmentDescription.description" style="white-space: pre-line;"></div>
        </confirm>
        <router-view></router-view>
        <div class="footer clearfix">
            <div class="edit" @click="patientShow= true">修改</div>
            <span class="label">就诊人：</span>{{patientDetail&&patientDetail.name}}<span
            v-if="patientDetail&&patientDetail.self">(本人)</span>
        </div>
        <Patient :optional="true" :parent="'department'" :current="patientDetail" v-if="patientShow"
                 ref="patient"></Patient>
    </el-container>
</template>

<script>
    import {Grid, GridItem, Confirm} from 'vux'
    import Patient from './patient-list'

    export default {
        data() {
            return {
                departmentList: [],
                departmentChildren: [],
                departmentCurrent: null,
                currentClass: '',
                index: null,
                rule: null,
                showConfirm: false,
                patientDetail: null,
                patientShow: false,
                showDepartmentDescription: {
                    show: false,
                    title: null,
                    description: null
                }
            }
        },
        mounted() {
            this.getDepartmentInfo()
            this.getRule()
            if (!this.patientDetail && this.$route.path === '/department-list') this.patientShow = true
            window.$vm.$on('changePatient', list => {
                this.patientDetail = list
                this.patientShow = false
            })
        },
        methods: {
            changeDepartment(item) {
                this.departmentList.map(e => {
                    e.active = false
                    return e
                })
                item.active = true
                this.departmentCurrent = item
                if (item.children && item.children[0]) this.departmentChildren = item.children
                this.showDepartmentDescription.title = `${item.name}须知`
                if (item.rules) {
                    this.showDepartmentDescription.show = true
                    this.showDepartmentDescription.description = item.rules
                }
                this.$router.push(this.$route.path + '/appointmentInfo?dept=' + ((item && item.value) || this.departmentCurrent.value) +
                    '&userPatientId=' + this.patientDetail.userPatientId)
            },
            departmentPage(item) {
                this.$router.push(this.$route.path + '/appointmentInfo?dept=' + ((item && item.value) || this.departmentCurrent.value))
            },
            getDepartmentInfo() {
                this.$http.get('/doctor/appointment/departmentInfo').then(result => {
                    if (result.success) {
                        result.data.map(e => {
                            e.active = false
                            return e
                        })
                        if (result.data[0]) {
                            result.data[0].active = true
                            // this.changeDepartment(result.data[0])
                        }
                        this.departmentList = result.data
                        this.sortDept(this.departmentList)
                    }
                })
            },
            getRule() {
                this.$http.get('/doctor/appointment/rule').then(result => {
                    if (result.success) {
                        this.rule = result.data
                    }
                })
            },
            sortDept(departmentList) {
                if (departmentList) {
                    for (let i = 0; i < departmentList.length; i++) {
                        const item = departmentList[i]
                        if (item.name === '核酸检测') {
                            // departmentList[i] = departmentList[0]
                            // departmentList[0] = item
                            item.important = true
                        }
                    }
                }
            }
        },
        components: {
            Grid,
            GridItem,
            Confirm,
            Patient
        },
        beforeRouteLeave(to, from, next) {
            let _this = this
            if (_this.patientShow) {
                if (_this.patientDetail) {
                    _this.patientShow = false
                    next(false)
                } else {
                    next()
                }
            } else {
                next()
            }
        },
        beforeRouteUpdate(to, from, next) {
            if (to.path === '/department-list') {
                if (!this.patientDetail) {
                    this.patientShow = true
                }
            }
            next()
        }
    }
</script>

<style scoped lang="less">
    .el-container {
        width: 100%;
        height: 100%;
    }

    .el-header,
    .el-main {
        padding: 0;
        /*overflow: hidden;*/
    }

    .el-main {
        background-color: #fff;
    }

    .el-header {
        margin-bottom: .15rem;
    }

    .registeredBox {
        width: 100%;
        height: 100%;
        background-color: #f4f4f4;
        padding-bottom: .8rem;

        .hospitalInfo {
            width: 100%;
            /*height: 1.5rem;*/
            padding: .2rem;
            background-color: #fff;

            .infoTop {
                height: .48rem;
                line-height: .48rem;

                .hospital {
                    float: left;
                    font-weight: 700;
                    font-size: .32rem;
                }

                .rating {
                    float: right;
                    padding: 0 .15rem;
                    border: .02rem solid #FFB14E;
                    color: #FFB14E;
                    line-height: .44rem;
                    font-size: .26rem;
                }
            }

            .infoBot {
                margin-top: .1rem;
                color: #999;
                line-height: .48rem;
                height: .48rem;

                .iconfont {
                    vertical-align: middle;
                    margin-right: .1rem;
                }

                .rule {
                    float: right;
                    padding: 0 .15rem;
                    border: .02rem solid #78ADFF;
                    color: #78ADFF;
                    line-height: .44rem;
                    font-size: .26rem;
                }
            }
        }

        .departmentOpt {
            width: 100%;
            height: 100%;
            background-color: #fff;
            display: flex;

            .depleft {
                width: 40%;
                height: 100%;
                overflow-x: hidden;
                overflow-y: auto;
                background-color: #ece7e7;

                ul {
                    width: 100%;
                    /*height: 100%;*/

                    /*overflow-y: auto;*/

                    li {
                        width: 100%;
                        height: .8rem;
                        padding-left: .2rem;
                        background-color: #ece7e7;
                        line-height: .8rem;
                        color: #999;
                    }

                    .active {
                        background-color: #fff;
                        color: rgb(96, 140, 235);
                    }
                }
            }

            .depright {
                width: 60%;
                height: 100%;

                ul {
                    width: 100%;
                    height: 100%;
                    overflow-x: hidden;
                    overflow-y: auto;

                    li {
                        width: 100%;
                        height: .8rem;
                        padding: 0 .3rem;
                        line-height: .8rem;
                    }
                }

                .empty {
                    text-align: center;
                    padding-top: .5rem;
                    color: #999;
                }
            }
        }

        /deep/ .rule-confirm {
            .weui-dialog__bd {
                padding: 0 .3rem;
                max-height: 80vh;
                overflow-y: scroll;
                margin: .3rem 0;
                line-height: .4rem;
                font-size: .28rem;
                text-align: left;
            }
        }
    }

    .department-list {
        padding-bottom: .2rem;

        /deep/ .weui-grids {
            &:before {
                display: none;
            }

            .weui-grid {
                padding: 0 .2rem;
                margin-top: .2rem;

                &:before, &:after {
                    display: none;
                }

                &:hover, &:active {
                    background-color: transparent;
                }

                > div {
                    padding: .3rem .2rem;
                    color: #666;
                    background-color: #f7f7f7;
                    border-radius: .1rem;
                }

                & .error {
                    color: #fc0c1b;
                }
            }
        }
    }

    .footer {
        position: fixed;
        z-index: 5;
        bottom: 0;
        left: 0;
        width: 100%;
        height: .8rem;
        line-height: .8rem;
        background-color: #fff;
        padding-left: .2rem;
        box-shadow: 0 0 5px 1px #eee;

        .edit {
            float: right;
            color: #409eff;
            padding: 0 .2rem;
        }

        .label {
            color: #999;
        }
    }
</style>
